<template>
  <div id="seat">
    <h1 class="title">个股透视</h1>
    <div v-show="!loading">
      <div class="middle" v-show="showMid">
        <div class="chart">
          <div class="middle-left">
            <h2>
              个股成功率 <span>{{ success }}</span>
            </h2>
            <div id="container"></div>
          </div>
        </div>
        <div class="chart">
          <div class="middle-right">
            <h2>
              跟买收益率 <span>{{ yied }}</span>
            </h2>
            <div id="container1"></div>
          </div>
        </div>
      </div>
      <div class="data-wushuju" v-show="!showMid"></div>
      <h1 class="title">
        上榜数据
        <div class="date">
          <el-select
            v-model="tradeDate"
            placeholder="请选择"
            @change="selectDate"
          >
            <el-option
              v-for="item in dateList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
      </h1>
      <!-- <div class="lower">
        <div class="lower-title">
          <div class="left"><span>当日上榜</span></div>
          <div class="right" v-if="onListName">{{ onListName }}</div>
        </div>
        <div v-show="show1">
          <table class="mb15" v-show="show1">
            <thead>
              <tr>
                <td class="left w180">买入营业部名称</td>
                <td class="left">席位类型</td>

                <td>买入金额</td>
                <td>卖出金额</td>
                <td>净额</td>
                <td class="left">标签</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in buyList" :key="item.id">
                <td class="left w180 yellow">
                  <el-popover
                    placement="bottom"
                    width="190"
                    :visible-arrow="false"
                    trigger="hover"
                    :content="item.branchName"
                  >
                    <span slot="reference"
                      >{{ item.branchName | filtration }}
                    </span>
                  </el-popover>
                </td>

                <td class="left">
                  <span class="type" :style="{ background: item.color }">{{
                    item.seatType
                  }}</span>
                </td>

                <td class="red">{{ item.buyMoney | format }}</td>
                <td class="green">{{ item.sellMoney | format }}</td>
                <td>{{ item.netAmount | format }}</td>
                <td class="left">
                  <span
                    class="tag"
                    v-for="(it, index) in item.tagList"
                    :key="index"
                    >{{ it }}</span
                  >
                </td>
              </tr>
            </tbody>
          </table>
          <table v-show="show1">
            <thead>
              <tr>
                <td class="left w180">卖出营业部名称</td>
                <td class="left">席位类型</td>
                <td>买入金额</td>
                <td>卖出金额</td>
                <td>净额</td>
                <td class="left">标签</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in sellList" :key="item.id">
                <td class="left w180 yellow">
                  <el-popover
                    placement="bottom"
                    width="190"
                    :visible-arrow="false"
                    trigger="hover"
                    :content="item.branchName"
                  >
                    <span slot="reference"
                      >{{ item.branchName | filtration }}
                    </span>
                  </el-popover>
                </td>
                <td class="left">
                  <span class="type" :style="{ background: item.color }">{{
                    item.seatType
                  }}</span>
                </td>
                <td class="red">{{ item.buyMoney | format }}</td>
                <td class="green">{{ item.sellMoney | format }}</td>
                <td>{{ item.netAmount | format }}</td>
                <td class="left">
                  <span
                    class="tag"
                    v-for="(it, index) in item.tagList"
                    :key="index"
                    >{{ it }}</span
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="wushuju" style="margin-top: 100px" v-show="!show1"></div>
      </div> -->

      <div class="lower" v-for="(item, index) in sblistData" :key="index">
        <div class="lower-title">
          <div class="left"><span>当日上榜</span></div>
          <!-- <div class="right" v-if="onListName">{{ onListName }}</div> -->
          <div class="right">
            {{ item.stockList.waveName }}
          </div>
        </div>
        <div v-show="show1">
          <table class="mb15" v-show="show1">
            <thead>
              <tr>
                <td class="left w180">买入营业部名称</td>
                <td class="left">席位类型</td>
                <!-- <td>次日上涨<br />概率</td> -->
                <td>买入金额</td>
                <td>卖出金额</td>
                <td>净额</td>
                <td class="left">标签</td>
              </tr>
            </thead>
            <tbody>
              <!-- <tr v-for="item in item.buyList" :key="item.id"> -->
              <tr v-for="item in item.buyBranch" :key="item.id">
                <td class="left w180 yellow">
                  <el-popover
                    placement="bottom"
                    width="190"
                    :visible-arrow="false"
                    trigger="hover"
                    :content="item.branchName"
                  >
                    <span slot="reference"
                      >{{ item.branchName | filtration }}
                    </span>
                  </el-popover>
                </td>

                <td class="left">
                  <!-- <span class="type" :style="{ background: item.color }">{{ -->
                  <span
                    class="type"
                    :style="{ background: tagColor(item.seatType) }"
                    >{{ item.seatType }}</span
                  >
                </td>
                <!-- <td class="blue">{{item.pricechgAvgNext}}</td> -->
                <td class="red">{{ item.buyMoney | format }}</td>
                <td class="green">{{ item.sellMoney | format }}</td>
                <td>
                  {{ (item.buyMoney - item.sellMoney) | format }}
                  <!-- {{ item.netAmount | format }} -->
                </td>
                <td class="left">
                  <span
                    class="tag"
                    v-for="(it, index) in item.tagType.split(',')"
                    :key="index"
                    >{{ it }}</span
                  >
                </td>
              </tr>
            </tbody>
          </table>
          <table v-show="show1">
            <thead>
              <tr>
                <td class="left w180">卖出营业部名称</td>
                <td class="left">席位类型</td>
                <!-- <td>次日上涨<br />概率</td> -->
                <td>买入金额</td>
                <td>卖出金额</td>
                <td>净额</td>
                <td class="left">标签</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in item.sellBranch" :key="item.id">
                <td class="left w180 yellow">
                  <el-popover
                    placement="bottom"
                    width="190"
                    :visible-arrow="false"
                    trigger="hover"
                    :content="item.branchName"
                  >
                    <span slot="reference"
                      >{{ item.branchName | filtration }}
                    </span>
                  </el-popover>
                </td>
                <td class="left">
                  <span
                    class="type"
                    :style="{ background: tagColor(item.seatType) }"
                    >{{ item.seatType }}</span
                  >
                </td>
                <!-- <td class="blue">{{item.pricechgAvgNext}}</td> -->
                <td class="red">{{ item.buyMoney | format }}</td>
                <td class="green">{{ item.sellMoney | format }}</td>
                <td>{{ (item.sellMoney - item.buyMoney) | format }}</td>
                <td class="left">
                  <span
                    class="tag"
                    v-for="(it, index) in item.tagType.split(',')"
                    :key="index"
                    >{{ it }}</span
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="wushuju" style="margin-top: 100px" v-show="!show1"></div>
      </div>
    </div>
    <div class="loadingBox" v-show="loading">
      <div class="loading"></div>
      <p>数据加载中...</p>
    </div>
  </div>
</template>
<script>
import { getTimeList, getStock, getStockList, stockList } from "../api/index";
import * as Highcharts from "highcharts";
import highchartsMore from "highcharts/highcharts-more";
highchartsMore(Highcharts);
import { numberFormat } from "../script/util";
var href = window.location.href;
var match = href.match(/id=([^\&]*)\&?.*/);
var code = match ? match[1] : "";
function formatedDate(date) {
  date = String(date);
  var pattern = /(\d{4})(\d{2})(\d{2})/;
  return date.replace(pattern, "$1-$2-$3");
}
function success(val) {
  val = Number(val);
  return val < 40 ? "较低" : "较高";
}
function yied(val) {
  val = Number(val);
  var text = "";
  if (val >= 2.5) {
    text = "较高";
  } else if (val >= 0 && val < 2.5) {
    text = "一般";
  } else {
    text = "较低";
  }
  return text;
}

export default {
  data() {
    return {
      // show: false,
      show1: false,
      loading: true,
      stockCode: "",
      tradeDate: "",
      stockObj: {},
      data1: [],
      data2: [],
      showMid: true,
      buyList: [],
      sellList: [],
      dateList: [],
      success: "",
      yied: "",
      onListName: "",
      sblistData: [],
    };
  },
  filters: {
    format(val) {
      return numberFormat(val);
    },
    filtration(value) {
      if (!value) return;
      value = value.replace(/<\/?[^>]*>|&nbsp;/gi, "");
      if (value.length <= 22) {
        return value;
      } else {
        return value.substring(0, 22) + "...";
      }
    },
  },
  mounted() {
    // let code = "64474";
    window.remoteIndividualFunc = (code) => {
      this.getStock(code);
    };
    window.addEventListener("resize", this.resizeHandler);
    this.resizeHandler();
    this.getStock(code);
  },

  methods: {
    tagColor(str) {
      //颜色处理
      var color = "";
      switch (str) {
        case "龙头席位":
          color = "#F14D35";
          break;
        case "机构":
          color = "#4783F1";
          break;
        case "特殊席位":
          color = "#AF319D";
          break;
        case "新股专家":
          color = "#F9973D";
          break;
        case "敢死队":
          color = "#32CAE1";
          break;
        default:
          color = "#475561";
          break;
      }
      return color;
    },

    resizeHandler() {
      let windowWidth = document.body.offsetWidth;
      let charts = document.getElementsByClassName("chart");
      Object.values(charts).forEach((ele) => {
        ele.style.width = Math.floor(windowWidth / 2) - 50 + "px";
      });
    },

    selectDate(val) {
      var date = val.replace(/-/gi, "");
      // this.getStockList(date);
      this.stockList(date);
    },
    async getStock(code) {
      await getStock({ id: code }).then((back) => {
        if (back.status == 1) {
          let res = back.data;
          this.success = success(res.successRateNext);
          this.yied = yied(res.pricechgAvgNext);
          this.stockCode = res.stockCode;
          this.getTimeList();
          var list3 = [],
            list4 = [];
          list3.push(res.successRateNext);
          list3.push(res.successRateDay3);
          list3.push(res.successRateDay5);
          list3.push(res.successRateDay10);
          list3.push(res.successRateDay20);

          list4.push(res.pricechgAvgNext);
          list4.push(res.pricechgAvgDay3);
          list4.push(res.pricechgAvgDay5);
          list4.push(res.pricechgAvgDay10);
          list4.push(res.pricechgAvgDay20);

          var total1 = list3.reduce((total, num) => total + num);
          var total2 = list4.reduce((total, num) => total + num);

          if (total1 == 0 && total2 == 0) {
            this.showMid = false;
          } else {
            this.showMid = true;
            this.data1 = list3.map(
              (item) => Math.round(item * 100 * 100) / 100
            );
            this.data2 = list4.map(
              (item) => Math.round(item * 100 * 100) / 100
            );
            this.drow("container", this.data1);
            this.drow("container1", this.data2);
          }
        }
      });
    },
    async getTimeList() {
      await getTimeList({ stockCode: this.stockCode }).then((back) => {
        if (back.status == 1) {
          let res = back.data;
          // this.getStockList(res[0]);
          this.stockList(res[0]);
          this.tradeDate = formatedDate(res[0]);
          this.dateList = res.map((item) => formatedDate(item));
        }
      });
    },
    // 新接口
    async stockList(date) {
      const back = await stockList({
        tradeDate: date,
        onListCode: this.stockCode,
      });
      if (back.status == 1) {
        let res = back.data;
        if (JSON.stringify(res) != "{}") {
          this.sblistData = res;

          // res.map((val) => {
          //   this.onListName = val.stockList.waveName;
          //   // 买入数据
          //   this.buyList = val.buyBranch.map((item) => {
          //     item.netAmount = item.buyMoney - item.sellMoney;
          //     item.color = tagColor(item.seatType);
          //     item.tagList = item.tagType.split(",");
          //     return item;
          //   });
          //   // 售出数据
          //   this.sellList = val.sellBranch.map((item) => {
          //     item.color = tagColor(item.seatType);
          //     item.tagList = item.tagType.split(",");
          //     item.netAmount = item.sellMoney - item.buyMoney;
          //     return item;
          //   });
          // });
          this.show1 = true;
        } else {
          console.log("无数据");
        }
        this.loading = false;
      }
    },

    drow(el, data, tick) {
      Highcharts.chart(el, {
        chart: {
          type: "line",
          spacing: [30, 5, 5, 5],
          plotBorderWidth: 1,
          backgroundColor: "#090910",
          borderColor: "#090910",
          plotBorderColor: "#1E2127",
          height: "240px",
          borderWidth: 1,
        },
        legend: {
          enabled: false,
        },
        credits: {
          enabled: false, // 禁用版权信息
        },
        title: {
          text: null,
        },
        xAxis: {
          categories: ["次日", "三日", "五日", "十日", "二十日"],
          lineWidth: 0,
        },
        yAxis: {
          tickAmount: 6,
          startOnTick: false,
          endOnTick: false,
          gridLineColor: "#1E2127",
          title: {
            text: "单位：%",
            align: "high",
            offset: 5,
            rotation: 0,
            y: -10,
            style: {
              fontWeight: "400",
              fontSize: "14px",
              color: "#999",
              textOutline: "none",
            },
          },
          labels: {
            format: "{value}",
          },
          maxPadding: 0.2,
        },
        plotOptions: {
          series: {
            color: "#FABE2E",
            shadow: true,
            lineWidth: 1,
            dataLabels: {
              enabled: true,
              allowOverlap: true, //设置允许重叠
              y: -5,
              style: {
                fontWeight: "400",
                fontSize: "13px",
                color: "#ffffff",
                paddingBottom: "5px",
                textOutline: "none",
              },
            },
          },
        },
        tooltip: {
          enabled: false,
        },
        series: [
          {
            data: data,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#seat {
  width: 100%;
//   max-width: 767px;
  background: #090910;
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
h2 {
  color: #bcbfc4;
  font-size: 16px;
  span {
    margin-left: 16px;
    color: #ff8d27;
  }
}
.data-wushuju {
  margin: 0 auto;
  margin-top: 40px;
  width: 301px;
  height: 176px;
  background: url($PIC_URL + "/tlbypcWeb/dragonTigerNew/littleshuju.png")
    no-repeat;
  background-size: 100%;
}
.wushuju {
  margin: 0 auto;
  width: 401px;
  height: 233px;
  background: url($PIC_URL + "/tlbypcWeb/dragonTigerNew/wushuju.png") no-repeat;
  background-size: 100%;
}
.loadingBox {
  width: 100%;
  height: 743px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .loading {
    margin: 0 auto;
    width: 192px;
    height: 192px;
    background: url($PIC_URL + "/tlbypcWeb/dragonTigerNew/loading.gif")
      no-repeat;
    background-size: 100%;
  }
  p {
    font-size: 18px;
    color: #bbbfc3;
    margin-top: 28px;
  }
}
.title {
  display: flex;
  justify-content: space-between;
  height: 48px;
  padding-left: 20px;
  font-size: 20px;
  line-height: 48px;
  color: #ff8a00;
  background: rgba(39, 40, 46, 1);
  border: 1px solid rgba(0, 0, 0, 1);
  .date {
    margin-right: 20px;
  }
}

.middle {
  height: 263px;
  padding: 20px;
  display: flex;
}
.lower {
  min-height: 500px;
  overflow: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;

  padding: 10px 20px 6px 20px;
  .lower-title {
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 16px;
    margin-bottom: 8px;
    .left {
      color: #999;
      span {
        margin-right: 10px;
        &.select {
          color: #2c7eff;
        }
      }
      .line {
        position: relative;
        top: 2px;
        display: inline-block;
        width: 1px;
        height: 15px;
        background: #3e4048;
      }
    }
    .right {
      height: 29px;
      padding: 0 10px;
      background: rgba(28, 29, 33, 1);
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 4px;
      color: #ff8a00;
      line-height: 29px;
      text-align: center;
    }
  }
  .mb15 {
    margin-bottom: 15px;
  }
  table {
    width: 100%;
    color: #bcbfc4;
    font-size: 15px;
    text-align: right;
    line-height: 20px;

    .left {
      text-align: left;
    }
    .w180 {
      width: 180px;
    }
    thead {
      background: #232429;
      td {
        padding: 8px 4px;
        border: 1px solid #323337;
      }
    }
    tbody {
      cursor: pointer;
      td {
        padding: 7px 4px;
        color: #e5e5e5;
        border: 1px solid #25262a;
        &.red {
          color: #e92727;
        }
        &.green {
          color: #31ed23;
        }
        &.blue {
          color: #02e2f4;
        }
        &.yellow {
          color: #f3f535;
        }
      }
      .type {
        display: inline-block;
        width: 70px;
        height: 21px;
        text-align: center;
        line-height: 21px;
        border-radius: 2px;
      }
      .tag {
        display: inline-block;
        width: 40px;
        height: 21px;
        line-height: 21px;
        text-align: center;
        color: #fff;
        background: rgba(67, 68, 82, 1);
        border-radius: 2px;
        margin-right: 5px;

        margin-bottom: 5px;
        &:last-child {
          margin: 0;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.el-input__inner {
  color: #fff;
  text-align: center;
  font-size: 15px;
  width: 132px;
  height: 44px;
  background: rgba(39, 40, 46, 1);
  border: 1px solid rgba(39, 40, 46, 1);
  border-radius: 0;
}

.el-select,
.el-input.is-focus,
.el-input__inner {
  border: none;
}
.el-select-dropdown {
  text-align: center;
  color: #bbbfc3;
  font-size: 15px;
  border-radius: 0;
  height: 278px;
  background: rgba(37, 37, 41, 1);
  border: 1px solid #000;
  overflow: scroll;
}

.el-select-dropdown__item {
  text-align: right;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #1d1f2b;
  color: #fff;
}
.el-select-dropdown__item.selected {
  background: #2d3145 url($PIC_URL + "/tlbypcWeb/dragonTigerNew/sel.png")
    no-repeat;
  background-position: 10px 12px;
  color: #fff;
}
.el-popper[x-placement^="bottom"] {
  margin-top: 0;
}

.el-icon-arrow-up:before {
  content: "\e78f";

  width: 12px;
  height: 8px;
}
.el-popover {
  box-sizing: border-box;
  padding: 10px;
  font-size: 14px;
  background: #1e202c;
  border: 1px solid #424664;
  color: #fff;
}
#container,
#container1 {
  min-width: 350px;
  //   width: 100%;
}
</style>
